<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上下滑动的图片效果</title>
<style>
/*单一图片与文字的容器样式*/
.holder {
	overflow:hidden;  /*隐藏溢出*/
	width:320px;      /*宽度和高度*/
	height:333px;
	float:left;       /*左浮动*/
	position:relative;
	background-color:#000;
	margin-right:1px;
}
/*容器内图片的样式*/
.holder .image {
	position:absolute;
	left:-100px;    /*这里左边的位置为缩进100*/
}
/*容器内标题的样式*/
.holder span {
	background-color:#333;
	font-size:27px;
	font-family:Arial, Helvetica, sans-serif;
	color:#dedede;
	font-weight:700;
	padding:4px;
	position:absolute;
	top:120px;
	left:4px;
}
/*容器内描述性文本的样式*/
.holder .text {
	padding:20px;
	display:none;  /*这里将文本设置为none，表示默认不显示*/
	font-family:Arial, Helvetica, sans-serif;
	line-height:26px;
	position:absolute;
	top:180px;
	font-size:16px;
	color:#fff;
	width:340px;
}
/*浮动清除*/
.clear {
	clear:both;
}
/*主容器的样式*/
.main {
	width:1000px;  /*主容器宽度*/
	height:333px;  /*高度*/ 
	margin:0 auto;  /*居中显示*/
	overflow:hidden;
}
.credit {
	font-size:12px;
	margin-top:25px;
}
</style>

<!--添加对jQuery库的引用-->
<script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript"> 
    //在页面加载事件中，为容器关联hover事件
	$(document).ready(function(){
		 $('.holder').hover(		 
			function () {                       //鼠标悬停时的事件处理代码
			$(this).removeClass('.notactive');	  //移除CSS类notactive
			$('.notactive').stop().animate({'width':'290px'},400); //动画使宽度为290
			$(this).find('img').stop().animate({'top':'-165px'},400); //使img元素的top到-165
			$(this).stop().animate({'width':'380px'},400);   //使宽度为380
			$(this).find('span').css({'background-color':'#000'}); //设置标题背景
			$(this).find('.text').fadeIn(300);              //淡入文本内容
		  },
			function () {                       //鼠标移出时的事件处理代码
				$('.notactive').stop().animate({'width':'320px'},400); //动画设置宽度
				$(this).addClass('.notactive'); //添加noactive这个CSS类	
				$(this).find('.text').hide();   //使文本隐藏
				$(this).find('img').stop().animate({'top':'0px'},500); //调整img元素的top为0px
				$(this).stop().animate({'width':'320px'},400);//调整宽度为320px
				//设置标题的背景颜色
				$(this).find('span').css({'background-color':'#333', 'color':'#dedede'}); 
			 
		  });
	});
</script>
</head>

<body>
<!--定义一个用来放置图片的容器-->
<div class="main">
  <!--图片和文字排列的容器-->
  <div class="holder notactive"> 
  <!--放置图片-->
  <img class="image" src="images/googlelogo.jpg" height=""/> 
    <!--图片标题-->
    <span>谷哥公司</span>
    <!--图片文字-->
    <div class="text">Google公司（中文官方译名谷歌，NASDAQ：GOOG、FWB：GGQ1），
    是一家美国的跨国科技企业，致力于互联网搜索、云计算、广告技术等领域，
    开发并提供大量基于互联网的产品与服务，其主要利润来自于AdWords等广告服务。
     </div>
  </div>
  <div class="holder notactive"> 
  <img class="image" src="images/sample2.jpg"/> 
   <span>水墨画</span>
    <div class="text">水墨画：由水和墨经过调配水和墨的浓度所画出的画，
     是绘画的一种形式，更多时候，水墨画被视为中国传统绘画，
     也就是国画的代表。也称国画，中国画。</div>
  </div>
  <div class="holder notactive">
   <img class="image" src="images/sample5.jpg"/> <span>姹紫嫣红</span>
    <div class="text">姹紫嫣红，形容花的品种繁多，五颜六色，景色艳美。
    有名联：姹紫嫣红三春晖，赏心悦目百事兴。
    出自 明· 汤显祖 《牡丹亭·惊梦》："原来姹紫嫣红开遍，似这般都付与断井颓垣。
    " 清· 黄景仁《飞雪满群山·冰花》词："空花先现处，是姹紫嫣红后身。"</div>
  </div>
  <div class="clear"></div>
</div>
</body>
</html>
